<template>
  <main-box>
    <PlusSearch
      v-model="queryform"
      :columns="formConfig"
      :show-number="2"
      label-width="80"
      label-position="right"
      class="mb-xs"
      @search="initData(true)"
      @reset="handleRest"
    >
      <template #plus-field-noticeType>
        <el-radio-group v-model="queryform.noticeType">
          <el-radio-button label="全部" :value="-1" />
          <el-radio-button label="盘点" :value="1" />
          <el-radio-button label="定检" :value="2" />
          <el-radio-button label="未归还" :value="3" />
        </el-radio-group>
      </template>
      <template #plus-field-warehouseId>
        <k-select-http
          v-model="queryform.warehouseId"
          paramsKey="searchValue"
          :immediately="true"
          :httpfn="getWarehouseList"
          :keyprops="{ label: 'name', value: 'warehouseId' }"
        />
      </template>
    </PlusSearch>

    <PureTable
      ref="tableRef"
      border
      adaptive
      :loading="loading"
      :data="tableData"
      :columns="columns"
      :pagination="pagination"
      @page-size-change="initData()"
      @page-current-change="initData(false)"
    />
  </main-box>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useTableConfig } from "@/utils/tableConfig";
import { type PlusColumn, PlusSearch } from "plus-pro-components";
import { listApi } from "@/api/notice";
import kSelectHttp from "@/components/k-select-http/index.vue";
import { allListApi as getWarehouseList } from "@/api/warehouse";

/* 查询表单 */
const formConfig: PlusColumn[] = [
  {
    label: "时间",
    prop: "time",
    valueType: "date-picker",
    fieldProps: {
      type: "daterange",
      valueFormat: "YYYY-MM-DD"
    }
  },
  {
    label: "工具室",
    prop: "warehouseId"
  },
  {
    label: "类型",
    prop: "noticeType"
    // 通知类型（1盘点通知 2定检通知 3未归还通知）
  }
];
const queryform = ref({ noticeType: -1, time: [] as any, warehouseId: "" });

const handleRest = () => {
  queryform.value.noticeType = -1;
  initData(true);
};

const getQueryParam = () => {
  const params = { ...queryform.value } as any;
  if (params.time && params.time.length) {
    params.params = {
      startTime: params.time[0],
      endTime: params.time[1]
    };
  }
  params.noticeType = params.noticeType > 0 ? params.noticeType : "";
  return params;
};

/* 表格数据 */
const { pagination } = useTableConfig();
const tableData = ref([]);
const loading = ref(false);
const columns = [
  { label: "日期", prop: "createTime" },
  { label: "工具室", prop: "warehouseName" },
  {
    label: "类型",
    prop: "noticeType",
    formatter: ({ noticeType }) => {
      let text = "";
      switch (Number(noticeType)) {
        case 1:
          text = "盘点";
          break;
        case 2:
          text = "定检";
          break;
        case 3:
          text = "未归还";
          break;
      }
      return text;
    }
  },
  { label: "消息内容", prop: "noticeContent" }
];

const initData = async (needInit = true) => {
  loading.value = false;
  if (needInit) {
    pagination.currentPage = 1;
  }
  const params = {
    pageNum: pagination.currentPage,
    pageSize: pagination.pageSize,
    ...getQueryParam()
  } as any;
  await listApi(params).then(res => {
    tableData.value = res.rows;
    pagination.total = Number(res.total);
  });
  loading.value = false;
};
initData();
</script>
